<%@page language="java" contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Lvniao</title>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/main.css"></link>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/form.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/font-awesome.css">
	<script src="${pageContext.request.contextPath}/statics/js/jquery-3.2.1.js"></script>
	<script>
		$(function(){
			$.ajax({
				url:"${pageContext.request.contextPath}/articles/categorylist",
				success:function(data){
					$(".catagory .content ul").html("");
					for(var i in data){
						var content = '<li addr="${pageContext.request.contextPath}/articles/category/' + data[i].id + '">' + data[i].name + '(' + data[i].count + ')</li>'
						$(".catagory .content ul").append(content);
					}
					$(".catagory .content ul li").click(function(){
						var addr = $(this).attr("addr");
						window.location = addr;
					});
				}
			});
			$.ajax({
				url:"${pageContext.request.contextPath}/articles/recent",
				success:function(data){
					$(".recent .content ul").html("");
					for(var i in data){
						var content = '<li addr="${pageContext.request.contextPath}/articles/article/' + data[i].id + '">' + data[i].name + '</li>'
						$(".recent .content ul").append(content);
					}
					$(".recent .content ul li").click(function(){
						var addr = $(this).attr("addr");
						window.location = addr;
					});
				}
			});
			$.ajax({
				url:"${pageContext.request.contextPath}/articles/recentcomments",
				success:function(data){
					$(".recentcomment .content ul").html("");
					for(var i in data){
						var content = '<li>' + data[i].name + ': ' + data[i].message + '</li>'
						$(".recentcomment .content ul").append(content);
					}
				}
			});
			$.ajax({
				url:"${pageContext.request.contextPath}/articles/comments/${article.id }",
				success:function(data){
					$(".commentlist .content ul").html("");
					for(var i in data){
						var content = "<li>";
						content += '<div class="commentimg fa fa-user-circle-o"></div><div class="commentname">' + data[i].name + '</div>';
						content += '<div class="commentmsg">' + data[i].message + '</div>';
						content += '<div class="commenttime">' + data[i].createTime + '</div>';
						content += "</li>";
						$(".commentlist .content ul").append(content);
					}
				}
			});
			$(".articleTitle").click(function(){
				var addr = $(this).attr("addr");
				window.location = addr;
			});
			$(".nav .item").mouseenter(function(){
				$(this).addClass("hover");
			}).mouseleave(function(){
				$(this).removeClass("hover");
			}).click(function(){
				var addr = $(this).attr("addr");
				window.location = addr;
			});
			$(".pageSection .item").mouseenter(function(){
				$(this).addClass("hover");
			}).mouseleave(function(){
				$(this).removeClass("hover");
			}).click(function(){
				var addr = $(this).attr("addr");
				window.location = addr;
			});
			$(window).scroll(function(){
				if($(window).attr("scrollY") < 50)
				{
					$(".navsection").css("position", "static");
					$(".maincontainer").css("margin-top", "10px");
				}
				else
				{
					$(".navsection").css("position", "fixed");
					$(".navsection").css("top", "0");
					$(".maincontainer").css("margin-top", "83px");
				}
			});
			$("#btnOk").click(function(){
				var comment = {};
				comment["article.id"] = $("#id").val();
				comment.name = $("#name").val();
				comment.email = $("#email").val();
				comment.message = $("#message").val();
				$.ajax({
					url:'${pageContext.request.contextPath}/articles/addcomment',
					type:'post',
					data:comment,
					success:function(data){
						window.location.reload();
					}
				});
			});
		});
	</script>
</head>
<body>
	<div class="section header navsection">
		<div class="content">
			<div class="navbar">
				<div class="nav">
					<ul>
						<li class="item" addr="${pageContext.request.contextPath}/home">首页</li>
						<li class="item select" addr="${pageContext.request.contextPath}/articles">文章</li>
						<li class="item" addr="${pageContext.request.contextPath}/home/contact">联系</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="section">
		<div class="content">
			<div class="maincontainer">
				<div class="left">
					<div class="contentSection article">
						<div class="articleTitle" addr="${pageContext.request.contextPath}/articles/article/${article.id }">${article.name }</div>
						<div class="articleContent">
							${article.content }
						</div>
						<div class="articleInfo">
							<span>分类：${article.category.name }</span>
							<span>作者：${article.author.name }</span>
							<span>时间：<fmt:formatDate value="${article.createTime}" pattern="yyyy-MM-dd　HH:mm"/></span>
						</div>
					</div>
					<div class="contentSection commentlist">
						<div class="content">
							<ul>
							</ul>
						</div>
					</div>
					<div class="contentSection">
						<div class="comment">
							<div class="commentinput lv-form-container">
								<input type="hidden" id="id" value="${article.id}"/>
								<div class="lv-control-row">
									<div class="lv-label">姓名</div>
									<input type="text" id="name" class="lv-control"/>
								</div>
								<div class="lv-control-row">
									<div class="lv-label">邮箱</div>
									<input type="text" id="email" class="lv-control"/>
								</div>
								<div class="lv-control-row">
									<div class="lv-label">留言</div>
									<textarea id="message" rows="4" style="height:100px;width:300px;line-height:16px;resize: none;" id="message" class="lv-control"></textarea>
								</div>
								<div class="lv-control-row">
									<div class="lv-btn" id="btnCancel">取消</div>
									<div class="lv-btn" id="btnOk">确定</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="right">
					<div class="contentSection aboutme">
						<img src="${pageContext.request.contextPath}/statics/images/lvniao.png" height="128">
						<h2>旅鸟</h2>
						<h4>在代码的海洋里漂泊</h4>
					</div>
					<div class="contentSection catagory">
						<div class="title">
							文章分类
						</div>
						<div class="content">
							<ul>
							</ul>
						</div>
					</div>
					<div class="contentSection recent">
						<div class="title">
							最新文章
						</div>
						<div class="content">
							<ul>
							</ul>
						</div>
					</div>
					<div class="contentSection recentcomment">
						<div class="title">
							最新评论
						</div>
						<div class="content">
							<ul>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="section footer">

	</div>
</body>
</html>